<template>
  <el-cascader
    popper-class="cascader-hide-radio-new"
    ref="areaRef"
    v-model="area"
    :props="treeProps"
    placeholder="请选择所属区域"
    :disabled="disabled"
    :style="{ width: width }"
    :clearable="clearable"
    @change="changeSelect"
  />
</template>

<script setup>
import areaCode from './areaCode.js'
import { get_area_list_by_parentcode } from '@/api/system'
import { isNil } from 'lodash-es'
// 全部区划
const emit = defineEmits([
  'update:modelValue',
  'areaChange',
  'update:areaCode',
  'update:lastCode'
])
const props = defineProps({
  lastCode: {
    type: String,
    default: ''
  },
  areaCode: {
    type: [String, Number],
    default: ''
  },
  clearable: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '160px'
  },
  maxLevel: {
    type: Number,
    default: 4
  },
  // 用来控制前面几层不能选择 0.省份disabled 1.市disabled 2....
  disabledLevel: {
    type: [Number, String],
    default: 0
  },
  // 父子强制关联 true:可选任意一级  false:只能选中最后一级
  strictly: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  },
  startFrom: {
    type: String,
    default: '000000'
  }
})
const areaRef = ref(null)
const area = computed({
  get() {
    return `${props.areaCode}`
  },
  set(val) {
    emit('update:areaCode', val)
  }
})
const calLeaf = (item, level) => {
  if(!item.hasChildren){
    return true
  }
  if (isNil(props.maxLevel)) {
    return !item.hasChildren
  }
  return level >= props.maxLevel
}
const treeProps = computed(() => {
  if (areaRef.value) {
    return {
      lazy: true,
      label: 'name',
      checkStrictly: true,
      lazyLoad: async (node, resolve) => {
        const { data, level } = node
       
        if (data && data.children && data.children.length !== 0) {
          return resolve([])
        }
        if (level === 0) {
          const r = await getArea(props.startFrom || '000000')
          const targetData = []
          for (const item of r.data) {
            const temp = {
              id: item.id,
              name: item.name,
              value: item.id,
              disabled: calDiasbled(level),
              leaf: calLeaf(item, level)
            }
            if (temp.id == props.areaCode) {
              targetData.push(temp)
            }
          }
          resolve(targetData)
        } else {
          const r = await getArea(data.id)
          const targetData = []
          for (const item of r.data) {
            const temp = {
              id: item.id,
              name: item.name,
              value: item.id,
              disabled: calDiasbled(level),
              leaf: calLeaf(item, level),
              loading: false
            }
            if (props.disabledLevel) {
              // 如果设置了不可选的level  node-level
              if (level > props.disabledLevel) {
                targetData.push(temp)
              } else {
                // eslint-disable-next-line eqeqeq
                item.id == area.value[level] && targetData.push(temp)
              }
            } else {
              targetData.push(temp)
            }
          }
          const pathLabels = areaRef.value.getCheckedNodes()[0]
          resolve(targetData)
        }
      }
    }
  } else {
    return {}
  }
})

const calDiasbled = nodeLevel => {
  if (!props.strictly) {
    return false
  }
  // 如果是有层级选择限制的 && nodeLevel< 层级限制的level
  if (props.disabledLevel > 0) {
    if (nodeLevel < props.disabledLevel) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}


const changeSelect = val => {
  emit('areaChange', [...val].slice(-1)[0])
  emit('update:areaCode', [...val].slice(-1)[0])
  emit('update:lastCode', [...val].slice(-1)[0])
  areaRef.value.getCheckedNodes()[0].isLeaf &&
    areaRef.value.togglePopperVisible(false)
}

const getArea = code => {
  return get_area_list_by_parentcode(code)
}
</script>

<style lang="scss" scoped></style>
